<template>
<div class="notice-banner" v-if="bannerList.length > 0">
  <div class="hide-notice" :style="headerStyle" v-if="!isShowBanner" @click="toggleNoticeBanner"></div>
  <div class="notice-header" :class="{test: !isShowBanner }" :style="headerStyle" @click="toggleNoticeBanner">
    <span v-show="isShowBanner" class="icon cuifont" style="margin-right: 12px" :class="icon(bannerList[0].type)"></span>
    <span v-show="isShowBanner">{{ bannerList[0].paramsValue.bannerTitle }}</span>
  </div>
  <div class="notice-content" :class="{open: isShowAll }" v-loading="loading">
    <notice-banner-item
        v-for="(item, index) in bannerList"
        :key="item.content"
        :index="index"
        :item="item" @close="close"/>
  </div>
  <div class="action" v-show="isShowBanner">
    <span @click="toggleShow">{{ isShowAll ? 'Hide' : 'Show All'}}</span>
    <span @click="toggleNoticeBanner" class="icon cuifont icon_chevrons_up"></span>
  </div>
</div>
</template>

<script>
import noticeBannerItem from "@/views/notice/notice-banner/notice-banner-item.vue";
export default {
  name: "notice-banner",
  components: {
    noticeBannerItem
  },
  data () {
    return {
      loading: false,
      bannerList: [],
      isShowAll: false,
      isShowBanner: false
    }
  },
  computed: {
    headerStyle () {
      if (this.bannerList.length > 0) {
        return {
          backgroundColor: this.bannerList[0].colour
        }
      }
      return  {}
    }
  },
  watch: {
    '$store.state.app.webSocketMessage' (val) {
      if (val.notifyType === 'banner') {
        this.getData('socket')
      }
    }
  },
  methods: {
    toggleShow () {
      this.isShowAll = !this.isShowAll
    },
    toggleNoticeBanner () {
      if (this.isShowBanner) {
        this.isShowAll = false
      }
      this.isShowBanner = !this.isShowBanner
      this.$nextTick(()=> {
        this.$emit('update:showNoticeBanner', this.isShowBanner)
      })
    },
    icon (val) {
      let icon = ''
      switch (val) {
        case 'Info':
          icon = 'icon_info_circle_fill'
          break
        case 'Alert':
          icon = 'icon_warning'
          break
        case 'Notification':
          icon = 'icon_alert_urgent'
          break
        case 'Update Released':
          icon = 'icon_textbox'
          break
        default:
          icon = 'icon_info_circle_fill'
      }
      return icon
    },
    async close (item) {
      const { userSaveNotice } = this.$interface.notice
      const params = {
        userId: this.$store.state.user.id,
        tenantCode: this.$store.state.user.tenantCode,
        notificationId: item.id,
        status: 1,
        notifyType: 'banner',
        closed: 1
      }
      this.loading = true
      const { data } = await userSaveNotice(params)
      if (data.code === 0 ) {
        await this.getData()
      }
    },
    async getData(socket) {
      this.loading = true
      const { userNoticeList } = this.$interface.notice
      const { data } = await userNoticeList({ userId: this.$store.state.user.id })
      this.bannerList = data.data
      this.loading = false
      if (this.bannerList.length > 0) {
        this.isShowBanner = true
        this.$emit('update:showNoticeBanner', true)
      } else {
        this.isShowAll = false
        this.isShowBanner = false
        this.$emit('update:showNoticeBanner', false)
      }
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.notice-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2000;
  .hide-notice {
    height: 4px;
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    cursor: pointer;
    z-index: 999;
  }
  .notice-header {
    cursor: pointer;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .test {
    height: 4px;
  }
  .notice-content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #F3F3F3;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    height: 0;
    overflow: hidden;
    transition: all .3s;
  }
  .open {
    padding: 16px;
    height: auto;
    max-height: 500px;
    overflow: auto;
  }
  .action {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    .icon {
      margin-left: 10px;
      font-size: 24px;
    }
  }
  .disable {
    cursor: not-allowed !important;
    opacity: 0.5;
  }
}
</style>